<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20_线性渐变</title>
<!--    修改渐变颜色的同时还能改变方向-->
</head>
<style>
    div{

        width: 300px;
        height: 200px;
        border: 1px black solid;
        float: left;
        margin: 10px;
    }
    .box1{
        /*从红-黄-绿*/
        background-image: linear-gradient(red,yellow,green);
    }
    .box2{
        background-image: linear-gradient(to right,red,yellow,green);
    }
    .box3{
        background-image: linear-gradient(to left,red,yellow,green);
    }
    .box4{
        /*任意角度 20deg是指角度,20度角,加了角度之后,颜色从下往上渐变*/
        background-image: linear-gradient(0deg,red,yellow,green);
    }
    .box5{
        /*渐变位置:到达颜色后面所接高度时,必须为对应的该颜色*/
        background-image: linear-gradient(red 50px,yellow 100px,green 150px);
    }
    .box6{

        background-image: linear-gradient(20deg,red 50px,yellow 100px,green 150px);
        font-size: 60px;
        text-align: center;
        font-weight: bolder;
        color: transparent;
        background-clip: text;
    }
</style>
<body>
<div class="box1">默认情况下,从上到下</div>
<div class="box2">使用to right,从左到右</div>
<div class="box3">使用to left,从右到左</div>
<div class="box4">任意角度</div>
<div class="box5">渐变位置</div>
<div class="box6">任意角度加渐变位置</div>
</body>
</html>